<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>电影海报</title>
</head>
<body>
    <style>
        *{
            padding: 0px;
            margin: 0px;
            font-size: 0px;
        }
        /* 主题 */
        .box1{
            width: 327px;
            height: 377px;
          
        }
     
        /* 3个电影介绍页 */
        .child{
            width: 326px;
            height: 102px;
           
            margin-top: 15px;
            position: relative;

        }
        /* 电影文字部分 */
        .box2{
            position: absolute;
            left: 87px;
            top: 3px;
            width: 240px;
            height: 90px;
          
            overflow: hidden;
        }

        /* 文字 */
        .left{
            font-size: 14px;
            height: 14px;
            line-height: 14px;
            float: left;
        }
        .right{
            font-size: 13px;
            height: 13px;
            line-height: 13px;
            float: right;
            color: red;
        }
        .text{  
            margin-top: 30px;
            width: 238px;

        }
        p{
            font-size: 12px;
            height: 12px;
            line-height: 12px;
            display: inline-block;
            vertical-align: top;
        }
        .im{    
            margin-top: 26px;
            margin-left: 6px;
            width: 70px;
            height: 14px;
            font-size: 12px;
            line-height: 12px;
            text-align: top;
            display: block;
        }
        .img{
            display: inline-block;
        }
        
        


       .film1::before{
           content: "#环太平洋##环太平洋";
           color: rgb(37, 156, 157);
       }

      p[class*="film"]::after{
           content: "[详细]";
           color: rgb(206, 2, 16);
           vertical-align: bottom;
       }

       
      
      

    </style>

    <div class="box1">
        <div class="child">
            <img src="./image/1.png" alt="">
            <div class="box2">
                <h3 class="left">环太平洋</h3>
                <span class="right">468人评论过</span>
                <div class="text">
                    <p class="film1">对影建筑倒塌、核弹攻击城市、外星人入侵..</p>
                </div>
                <div class="im">
                    <img src="./image/4.png" alt="">
                   <p>欧美电影</p>
                </div>
            </div>
        </div>
        <div class="child">
            <img src="./image/2.png" alt="">
            <div class="box2">
                <h3 class="left">速度与激情</h3>
                <span class="right">783人评论过</span>
                <div class="text">
                    <p class="film2" >【杰森斯坦森确定加盟#速#】斯坦森饰演第六部大反派文肖..</p>
                </div>
                <div class="im">
                    <img src="./image/4.png" alt="">
                    <p>热映推荐</p>
                </div>
            </div>
        </div>


        <div class="child">
            <img src="./image/3.png" alt="">
            <div class="box2">
                <h3 class="left">环太平洋</h3>
                <span class="right">97人评论过</span>
                <div class="text">
                    <p class="film3">《青春派》预告片零差评逆增长..</p>
                </div>
                <div class="im">
                    <img src="./image/4.png" alt="">
                   <p> 电影预告</p>
                </div>
            </div>
        </div>
    </div>
</body>
</html>